import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Row, Col, DatePicker, InputNumber } from 'antd';
import axios from '../../components/Engineering/axios'
const { Option, OptGroup } = Select;
const FormItem = Form.Item;


class KimInputNumber extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      disabled: true
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }
    return (
      <>
        <Card title='最简单的用法，在浮层中可以选择或者输入日期' style={{ marginTop: 10 }}>
          <InputNumber min={1} max={10} defaultValue={3} onChange={(value) => console.log(value)} />
        </Card>

        <Card title='三种大小的数字输入框，当 size 分别为 large 和 small 时，输入框高度为 40px 和 24px ，默认高度为 32px' style={{ marginTop: 10 }}>
          <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={(value) => console.log(value)} style={{ marginRight: 20 }} />
          <InputNumber min={1} max={100000} defaultValue={3} onChange={(value) => console.log(value)} style={{ marginRight: 20 }} />
          <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={(value) => console.log(value)} style={{ marginRight: 20 }} />
        </Card>

        <Card title='不可用' style={{ marginTop: 10 }}>
          <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} style={{ marginRight: 20 }} />
          <Button onClick={() => this.setState(({ disabled }) => ({ disabled: !disabled }))} type="primary"> Toggle disabled </Button>
        </Card>

        <Card title='小数' style={{ marginTop: 10 }}>
          <InputNumber min={0} max={10} step={0.1} />
        </Card>


        <Card title='通过 formatter 格式化数字，以展示具有具体含义的数据，往往需要配合 parser 一起使用' style={{ marginTop: 10 }}>
          <InputNumber
            defaultValue={1000}
            formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
            parser={value => value.replace(/\$\s?|(,*)/g, '')}
            style={{ marginRight: 20 }} />
            
          <InputNumber defaultValue={100} min={0} max={100}
            formatter={value => `${value}%`} parser={value => value.replace('%', '')} />
        </Card>

      </>
    )

  }
}

export default Form.create({ name: 'KimInputNumber' })(KimInputNumber)



// API#
// 属性如下
// 成员	                   说明	类型	默认值	版本
// autoFocus	             自动获取焦点	boolean	false	
// defaultValue	           初始值	number		
// disabled	               禁用	boolean	false	
// formatter	             指定输入框展示值的格式	function(value: number | string): string	-	
// max	                   最大值	number	Infinity	
// min	                   最小值	number	-Infinity	
// parser	                 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用	function( string): number	-	
// precision	             数值精度	number	-	
// decimalSeparator	       小数点	string	-	3.10.0
// size	                   输入框大小	string	无	
// step	                   每次改变步数，可以为小数	number|string	1	
// value	                 当前值	number		
// onChange	               变化回调	Function(value: number | string)		
// onPressEnter	           按下回车的回调	function(e)		

// 方法#
// 名称	                   描述	版本
// blur()                  移除焦点	
// focus()	               获取焦点	